<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

	<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
	
	<style type="text/css" media="screen">
		body {
			font-size: 14px;
			padding: 10px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			max-width: 640px;
		}

		p {
			margin: 30px 10px;
		}

	</style>
	
</head>

<body>
	
	<div id="dropdown"></div>
	
	<p>Testing text</p>

	<script type="text/javascript" charset="utf-8">

		var init = function() {
					
			window.dropdown = new Nokia.DropDown({
				element: '#dropdown',

				show: function() {
					console.log("show");
				},

				hide: function() {
					console.log("hide");
				},

				items: [
					{
						label: "First option",
						value: 'some value',
						select: function(item, event) {
							console.log('Drop Down Clicked on: ' + item.label);
						}
					},
					{
						label: "Second option",
						value: 'some value',
						select: function(item, event) {
							console.log('Drop Down Clicked on: ' + item.label);
						}
					},
					{
						label: "Third option",
						value: 'some value',
						select: function(item, event) {
							console.log('Drop Down Clicked on: ' + item.label);
						}
					},
					{
						label: "Fourth option",
						value: 'some value',
						select: function(item, event) {
							console.log('Drop Down Clicked on: ' + item.label, item.value);
						}
					},
					{
						label: "Fifth option",
						value: 'some value',
						select: function(item, event) {
							console.log('Drop Down Clicked on: ' + item.label);
						}
					}
				]
			});
			
			/*
			 * Hide splash when its all done.
			*/
			
			Nokia.hideSplash();

		};
		
		/*
		 * Show splash while loading components.
		*/
			
		Nokia.showSplash('<span>loading</span>');
		
		Nokia.use('dropdown', init);

	</script>

</body>
</html>